<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="layui-form-item" style="margin-top: 20px;" onsubmit="return false;">
			<form class="layui-form">
				<label class="layui-form-label">用户名:</label>
				<div class="layui-input-inline" style="width:120px;">
					<input type="text" id="txtUserName" name="txtUserName" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width:120px;">
					<input type="text" name="begin" id="begin" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width:120px;">
					<input type="text" name="end" id="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
				</div>			
				<label class="layui-form-mid">是否锁定:</label>
				<div class="layui-input-inline" style="width:120px;">
					<select id="cc" name="dept">
						<option value="">请选择</option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>
				<label class="layui-form-mid">排序:</label>
				<div class="layui-input-inline" style="width:120px;">
					<select id="ord" name="orderBy">
						<option value="">请选择</option>
						<option value="CreateTime">创建时间</option>
						<option value="LastLoginTime">最后登录时间</option>
					</select>
				</div>
			</form>
			<button class="layui-btn" id="search" data-type="reload">搜索</button>			
		</div>

		<table class="layui-hide" id="demo" lay-filter="test"></table>
		<!--顶部工具栏-->
		<script type="text/html" id="topToolbar">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="createUser">创建用户</button>
			</div>
		</script>
		<!--行内工具栏-->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="setRoleAction">角色</a>
			<a class="layui-btn layui-btn-xs" lay-event="setUserEdit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="setUserDel">删除</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setResetPwd">密码重置</a>
		</script>
		<!--行内模版-->
		<script type="text/html" id="checkboxTpl">
			<!-- 这里的 checked 的状态只是演示 -->
			<input type="checkbox" name="lock" value="{{d.LoginName}}" title="锁定" lay-filter="lockDemo" {{ d.IsLockout=='是' ? 'checked' : '' }}>
		</script>

		<!--
        	作者：offline
        	时间：2019-06-24
        	描述：编辑
        -->
		<div id="yh_edit" style="display:none;margin-top: 20px;">
			<form class="layui-form" lay-filter="updateUser" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" id="LoginName" name="LoginName" class="layui-input" readonly="true">
					</div>

				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" id="ProtectEMail" name="ProtectEMail" required="" lay-verify="email" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" id="ProtectMTel" name="ProtectMTel" required="" lay-verify="required|phone" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align:center;">
					<button class="layui-btn" lay-filter="userEditBtu" lay-submit="">
                        	修改
                    </button>
				</div>
			</form>
		</div>
		<!--
        	作者：offline
        	时间：2019-06-24
        	描述：角色
        -->
		<div id="yh_role" style="display:none">
			<div id="role_transfer" class="demo-transfer"></div>

		</div>
		<script>
			layui.config({
				version: '1560414887305' //为了更新 js 缓存，可忽略
			});
			var loadCurr = false;
			layui.use(['laydate', 'layer', 'table', 'form', 'transfer'], function() {
				var laydate = layui.laydate //日期
					,layer = layui.layer //弹层
					,table = layui.table //表格
					,form = layui.form //轮播
					,transfer = layui.transfer; //滑块
				//日期
				laydate.render({
					elem: '#begin'
				});
				laydate.render({
					elem: '#end'
				});
				//执行一个 table 实例
				table.render({
					elem: '#demo'
					,height: 400
					,url: '' + globalData.server + 'GetUsersLayUI' //数据接口
					,toolbar: '#topToolbar'
					,method: 'post'
					,where: {
						'token': globalData.myToken
					}
					,title: '用户表'
					,page: true //开启分页
					,cols: [
						[ //表头
							{
								field: 'LoginName',
								title: '用户名',
								width: 80,
								sort: true,
								fixed: 'left'
							}, {
								field: 'ProtectEMail',
								title: '邮箱',
								width: 120
							}, {
								field: 'ProtectMTel',
								title: '手机号',
								width: 100,
								align: 'center'
							}, {
								field: 'IsLockout',
								title: '是否锁定',
								width: 80,
								align: 'center'
							}, {
								field: 'CreateTime',
								title: '创建时间',
								width: 180,
								align: 'center'
							}, {
								field: 'LastLoginTime',
								title: '最后登录时间',
								width: 180
							}, {
								field: 'lock',
								title: '是否锁定',
								width: 110,
								templet: '#checkboxTpl',
								unresize: true
							}, {
								fixed: 'right',
								title: '操作',
								width: 260,
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					],
					id: "testReload",
					done: function(res, curr, count) {
						loadCurr = false;
					}
				});
				//数据重载
				var $ = layui.$;
				
				active = {
					reload: function() {
						var txtUserName = $('#txtUserName');
						var begin = $('#begin');
						var end = $('#end');
						var isLock = $('#cc');
						var orderBy = $('#ord');
						if(loadCurr) {
							table.reload('testReload', {
								where: {
									'token': globalData.myToken,
									'userName': txtUserName.val(),
									'beginDate': begin.val(),
									'endDate': end.val(),
									'isLock': isLock.val(),
									'orderBy': orderBy.val()
								}
							});
						} else {
							table.reload('testReload', {
								where: {
									'token': globalData.myToken,
									'userName': txtUserName.val(),
									'beginDate': begin.val(),
									'endDate': end.val(),
									'isLock': isLock.val(),
									'orderBy': orderBy.val()
								},
								page: {
									curr: 1 //重新从第 1 页开始			    
								}
							});
						}
					}
				};
				
				//查询操作 
				$('#search').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';					
				});
				var edit_index; //修改弹出窗口的标记，用于关闭
				
				
				//监听锁定操作
				form.on('checkbox(lockDemo)', function(obj) {
					var objrow; //监听行操作
					table.on('row(test)', function(obj1) {
						objrow = obj1;
					});
					if(obj.elem.checked) {
						$.post("" + globalData.server + "LockUser", {
							"un": this.value,
							"token": globalData.myToken
						}, function(result) {
							if(result.success) {
								objrow.update({
									IsLockout: '是'
								});
								layer.alert("锁定成功!");
							} else {
								layer.alert(result.message);
							}
						}, "json");
					} else {
						$.post("" + globalData.server + "LockUser", {
							"un": this.value,
							"token": globalData.myToken
						}, function(result) {
							if(result.success) {
								objrow.update({
									IsLockout: '否'
								});
								layer.alert("解锁成功!");
							} else {
								layer.alert(result.message);
							}
						}, "json");
					}
				});
				//监听表单提交
				form.on('submit(userEditBtu)', function(data) {
					$.post("" + globalData.server + "UpdateUser", {
						"loginName": data.field.LoginName,
						"email": data.field.ProtectEMail,
						"mtel": data.field.ProtectMTel,
						"token": globalData.myToken
					}, function(result) {
						if(result.success) {
							layer.close(edit_index);
							layer.alert("修改成功!");
							var type = "reload";
							loadCurr = true;
							active[type].call(this);
						} else {
							layer.alert(result.message);
						}
					}, "json");
					return false;
				});
				//顶部工具栏事件
				table.on('toolbar(test)', function (obj) {
				    switch (obj.event) {			       
				        case 'createUser':{
				        	layer.open({
								type: 2,
								area: ['500px', '400px'],
								title: '添加用户',
								fixed: false, //不固定
								maxmin: true,
								content: "user_add.html"
							});
				        }
				        break;
				    };
				});
				
				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					//重置密码
					if(obj.event === 'setResetPwd') {
						layer.confirm('确认重置用户' + data.LoginName + '的密码吗?', function(index) {
							$.post("" + globalData.server + "ResetPassword", {
								"un": data.LoginName,
								"token": globalData.myToken
							}, function(result) {
								if(result.success) {
									layer.alert("重置成功!");
								} else {
									layer.alert("重置失败，请重试!");
								}
							}, "json");
						});
					} 
					else if(obj.event === 'setRoleAction') { //角色设置
						//左侧数据
						$.post("" + globalData.server + "GetRolesAll", {
							"token": globalData.myToken
						}, function(result) {
							//遍历result,替换key
							var rul = result.map(function(item) {
								return {
									value: item.Id,
									title: item.Name
								}
							});
							var rdata = new Array();
							//右侧角色
							$.post("" + globalData.server + "GetRolesByUserIdLayUI", {
								"uId": data.Id,
								"token": globalData.myToken
							}, function(result) {
								if(result.count > 0) {
									for(var i = 0; i < result.data.length; i++) {
										rdata.push(result.data[i].Id);
									}
								}
								//数据穿梭
								transfer.render({
									elem: '#role_transfer',
									title: ['系统所有角色', '当前用户的角色'],
									data: rul,
									value: rdata,
									onchange: function(obj, index) {
										if(index == "0") {
											//设置用户角色
											for(var i = 0; i < obj.length; i++) {
												$.post("" + globalData.server + "AddUserToRole", {
													"uId": data.Id,
													"rId": obj[i].value,
													"token": globalData.myToken
												}, function(result) {

												}, "json");
											}

										} else {
											//删除用户角色
											for(var i = 0; i < obj.length; i++) {
												$.post("" + globalData.server + "RemoveUserFromRole", {
													"uId": data.Id,
													"rId": obj[i].value,
													"token": globalData.myToken
												}, function(result) {

												}, "json");
											}

										}
									}
								});
							}, "json");
						}, 
						"json");
						//弹出角色设置框	 
						layer.open({
							type: 1,
							title: '您正在设置用户[' + data.LoginName + ']的角色',
							content: $("#yh_role"),
							area: ['500px', '400px'],
							fixed: false, //不固定
							maxmin: true,
							offset: '10px'
						});
					} 
					else if(obj.event === 'setUserDel') { //删除操作
						layer.confirm('确认删除改用户[' + data.LoginName + ']的信息吗?', function(index) {
							$.post("" + globalData.server + "DeleteUser", {
								"uid": data.Id,
								"token": globalData.myToken
							}, function(result) {
								if(result.success) {
									obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
									layer.close(index);
									layer.alert("删除成功!");
								} else {
									layer.alert("删除失败，请重试!");
								}
							}, "json");
						});
					} 
					else if(obj.event === 'setUserEdit') {
						form.val("updateUser", data);
						edit_index = layer.open({
							type: 1,
							title: '您正在修改用户[' + data.LoginName + ']的信息',
							content: $("#yh_edit"),
							area: ['500px', '400px']
						});
					}					
				});
			
			});
		</script>
	</body>
</html>